
<style>
  .chess-board {
    width: 1160px;
    height: 760px;
    background-color: bisque;
    position: relative;
  }
  .board-canvas{
    width: 760px;
    height: 760px;
    float: left;
  }
  .user-info{
    float: left;
  }
  .form-group{position: relative;}
  .form-group:after{ content: "";display: block;float: none; }
  input.input{font-size: 14px; text-indent: 35px;border: solid 1px #ddd;
    width: 100%;height: 34px;line-height: 20px;display: block;border-radius: 4px;
    -webkit-appearance: none;box-shadow: 0 1px 1px rgba(0,0,0,0.075) inset;
    transition: all 1s cubic-bezier(0.175,0.885,0.32,1) 0s;}
</style>

<template>
  <div>
    <div class="chess-board">
      <svg class="board-canvas">
        <path :d="line" v-for="line in chessboard.lines" stroke="black" fill="none" stroke-width="1"></path>
      </svg>
      <piece v-for="point in chessboard.points" :key="point.id"
             v-bind="{id: point.id, location: point.location, piece: point.piece, marker: point.marker}"></piece>
      <div class="user-info">
        <div class="form-group">
          <div class="" style="width:240px;">
            <input v-model="account.name" type="text" class="form-control input" @blur="check('userName')">
            <img src="/static/images/usercenter.png" width="20" style="position:absolute;top:8px;left:10px;">
          </div>
          <p class="error-tips name-error">{{error.name}}</p>
        </div>
        <div class="form-group">
          <div class="field field-icon-left" style="width:240px;">
            <input v-model="account.password"  type="password" class="form-control input"  @blur="check('password')">
            <img src="/static/images/password.png" width="20" style="position:absolute;top:8px;left:10px;">
          </div>
          <p class="error-tips password-error">{{error.password}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {Chessboard} from '@/assets/js/Chessboard'
  import piece from '@/components/piece'

  export default {
    name: 'chessboard',
    data () {
      return {
        chessboard: new Chessboard(),
        account: {name: '', password: ''},
        error: {name: '', password: ''}
      }
    },

    components: {
      piece,
    },

    created: function () {
      let user = {
        userId: 10000001,
        userName: 'admin',
        nickname: 'administrator',
        account: 'admin',
        token: '10000001'
      };
      sessionStorage.setItem('user', JSON.stringify(user))
    },

    methods: {
      check: function (type) {

      }
    }
  }
</script>
